<template>
  <div class="PageScroll" :style="rootstyle">
    <el-scrollbar  wrap-class="scrollbar-wrap">
      <slot></slot>
    </el-scrollbar>
  </div>
</template>

<script setup >
import { computed } from 'vue';
const props = defineProps({
  scrollHeight: {
    type: String,
    default: ''
  }
})

const rootstyle = computed(() => {
  if (props.scrollHeight) {
    return `--scrollHeight: ${props.scrollHeight}px;`
  } else {
    return '--scrollHeight: 100%;'
  }
})
</script>

<style scoped lang="scss">
.PageScroll {
  --scrollHeight: 100%;
  height: var(--scrollHeight);
  overflow: hidden;
}
</style>
